<template>
  <div class="app-container">
    <div class="head-container">
      <!-- 搜索 -->
      <el-input
        v-model="listquery.key"
        clearable
        size="small"
        placeholder="模糊搜索"
        style="width: 200px"
        class="filter-item"
      />
      <date-range-picker v-model="valueData" class="date-item" />
      <el-input-number
        size="small"
        class="filter-item"
        v-model="listquery.hour"
        style="width: 100px"
      ></el-input-number>
      <el-select
        v-model="listquery.isComplete"
        placeholder="请选择"
        style="width: 100px"
        class="filter-item"
      >
        <el-option label="上传成功" value="1"> </el-option>
        <el-option label="上传失败" value="2"> </el-option>
        <el-option label="全部" value="3"> </el-option>
      </el-select>
      <span>
        <el-button
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-refresh"
          @click="filter()"
          >搜索</el-button
        >
      </span>
    </div>
    <span v-if="hour > 0">
      {{ hour }}小时内共有{{ total }}个村庄上传进度包
    </span>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="isloading"
      :data="listData"
      stripe="true"
      border
      tooltip-effect="dark"
      class="eltable"
    >
      <el-table-column label="用户名" width="325px" prop="userName" />
      <el-table-column label="目标村庄" width="325px" prop="villageName" />
      <el-table-column label="失败信息" prop="message" />
      <el-table-column label="更新完成" width="75px">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.isComplete">是</el-tag>
          <el-tag type="danger" v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="操作时间" width="135px" />
    </el-table>

    <el-pagination
      v-if="listData.length > 0"
      class="elpagi"
      :total="total"
      @size-change="getdata"
      @current-change="getdata"
      @prev-click="getdata"
      @next-click="getdata"
      :current-page.sync="listquery.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size.sync="listquery.pageSize"
      layout="total,sizes, prev, pager, next, jumper"
    />
  </div>
</template>

<script>
import { getlist } from "@/api/upprogress";
import DateRangePicker from "@/components/DateRangePicker";

export default {
  name: "Menu",
  components: { DateRangePicker },
  data() {
    return {
      listquery: {
        pageSize: 10,
        currentPage: 1,
        key: "",
        endDate: null,
        startDate: null,
        hour: 0,
        isComplete: "3",
      },
      listData: [],
      isloading: false,
      total: 0,
      searchToggle: true,
      valueData: "",
      hour: 0,
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    filter() {
      this.listquery.currentPage = 1;
      this.getdata();
    },
    async getdata() {
      console.log(this.listquery);
      this.isloading = true;
      if (this.valueData !== null) {
        this.listquery.startDate = this.valueData[0];
        this.listquery.endDate = this.valueData[1];
      } else {
        this.listquery.startDate = null;
        this.listquery.endDate = null;
      }
      let res = await getlist(this.listquery);
      this.listData = res.data.content;
      this.total = res.data.totalElements;
      this.hour = this.listquery.hour;
      this.isloading = false;
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}

.crud-opts {
  padding: 4px 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.crud-opts .crud-opts-right {
  margin-left: auto;
}
</style>
